@use '../../com/comm.scss' as com;

$radius: 12px;

.index-container {
    @include com.pad(40px, 45px, 3px, 3px);
    background-image: linear-gradient(to bottom, rgb(255, 86, 86), rgb(255, 195, 195), rgb(235 235 235));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;

    .swiper-main-container {
        max-width: 424px;
        width: 100%;
        margin: auto;
        height: 250px;
        position: relative;
        @include com.pad(52px, 20px, 30px, 28px, true);

        &::after {
            position: absolute;
            width: 100%;
            content: '';
            background-image: url("../../assets/images/swiper_frame.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: block;
            z-index: 1;
            left: 0;
            top: 0;
            height: 100%;
            pointer-events: none;
        }

        .first-swiper {
            height: 100%;
            border-radius: $radius;
            position: relative;
        }
    }

    .fill-parent {
        width: 100%;
    }

    .common-card {
        background-color: white;
        position: relative;
        overflow: hidden;
        border-radius: $radius;
        @include com.pad($radius, $radius, $radius, $radius);
    }

    .layout-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .entry-container {
        .main-logo {
            width: 28px;
            vertical-align: middle;
        }

        .hot {
            color: red;
        }

        .logo-text {
            display: flex;
            height: 100%;
            align-items: center;
            font-family: "黑体";
            font-weight: 400;
        }
    }


    .entry-link-icon {

        img {
            background-color: transparent !important;
        }
    }

    .tell-container {
        position: relative;
        background-color: white;
        box-sizing: border-box;
        margin-top: 14px;
        width: 100%;
        border-radius: $radius;

        @include com.pad(8px, 8px, 6px, 6px);

        .tell-swiper {
            height: 28px;

            .tell-items {
                font-size: 15.7px;
                white-space: nowrap;
                color: rgb(56, 56, 56);
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
                display: flex;
                height: 100%;
                align-items: center;
            }
        }

    }

    a {
        text-decoration: none;
    }
}